<template>
  <div class="matter">
    <div class="header-search">
      <el-button type="primary" size="small" @click="handleAdd"> 新建 </el-button>
    </div>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="matter" label="办件事项" header-align="center" />
      <el-table-column prop="money" label="提成金额" header-align="center" />
      <el-table-column prop="created_time" label="更新时间" header-align="center" />
      <el-table-column label="操作" width="200" header-align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.page"
        :page-sizes="pageSizes"
        :page-size.sync="queryParams.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
    <el-dialog
      :title="editForm.id ? '编辑' : '新建'"
      :visible.sync="editShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
      @close="closeForm"
    >
      <el-form ref="formRef" :model="editForm" :rules="formRules" label-width="80px">
        <el-form-item label="办件事项" prop="matter">
          <el-input
            v-model="editForm.matter"
            placeholder="请输入办件事项"
            maxlength="100"
            clearable
          />
        </el-form-item>
        <el-form-item label="提成金额" prop="money">
          <el-input-number
            v-model="editForm.money"
            :min="0"
            :controls="false"
            placeholder="请输入提成金额"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMatterPage,
  saveMatter,
  updateMatter,
  deleteMatter,
} from "@/api/systemManagement/matter";
export default {
  data() {
    return {
      queryParams: {
        page: 1, // 当前页码
        limit: 10, // 每页条数
      },
      pageSizes: [10, 20, 30, 40], // 每页条数选择
      total: 0, // 总条数
      dataList: [], // 数据列表
      editShow: false, // 编辑弹窗
      editForm: {}, // 编辑表单
      formRules: {
        matter: [{ required: true, message: "请输入办件事项", trigger: "blur" }],
        money: [
          { required: true, message: "请输入提成金额", trigger: "blur" },
          { type: "number", message: "请输入数字" },
        ],
      },
    };
  },

  created() {
    this.getList();
  },
  methods: {
    // 获取办件事项列表
    getList() {
      getMatterPage(this.queryParams).then((res) => {
        this.dataList = res.data.list;
        this.total = res.data.dataCount;
      });
    },
    // 切换条数
    handleSizeChange(val) {
      this.queryParams.limit = val;
      this.queryParams.page = 1;
      this.getList();
    },
    // 切换页码
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.getList();
    },
    // 搜索
    handleSearch() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 提交表单
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          let request = this.editForm.id ? updateMatter : saveMatter;
          request(this.editForm).then((res) => {
            this.$message.success("操作成功!");
            this.closeForm();
            this.getList();
          });
        }
      });
    },
    // 关闭弹窗
    closeForm() {
      this.editForm = {
        matter: "",
        money: 0,
      };
      setTimeout(() => {
        this.$refs.formRef.resetFields();
      }, 0);
      this.editShow = false;
    },
    // 新增
    handleAdd() {
      this.editShow = true;
    },
    // 编辑
    handleEdit(row) {
      this.editForm = Object.assign({}, row);
      this.editShow = true;
    },
    // 删除
    handleDel(row) {
      this.$confirm("确认删除该条办件事项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteMatter({ id: row.id }).then((res) => {
            this.$message.success("删除成功!");
            this.getList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.matter {
  min-height: 100%;
  background: #fff;
  padding: 20px;
  .header-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .el-icon-search {
      cursor: pointer;
      line-height: 32px;
      padding: 0 5px;
    }
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
}
</style>
